<template>
  <div class='set-pwd'>
    <m-header-title headerTitle="setPwd" @goBack='goBack'/>
    <m-pull-refresh @refReshSend='refReshSend'>
      <template v-slot>
        <van-form @failed="onFailed">
          <van-cell-group inset>
            <div class='input-item'>
              <van-field
                v-model="oldPwd"
                name="原密码"
                label="原密码"
                :type="[originalActive ?'text' : 'password']"
                placeholder="请录入原密码"
                :rules="[{ required: true, message: '请填写原密码' }]"
              />
              <van-icon :name="[originalActive ? 'eye-o' : 'closed-eye']" class='icon' @click='originalActive = !originalActive'/>
            </div>
            <div class='input-item'>
              <van-field
                v-model="newPwd_1"
                name="新密码"
                label="新密码"
                :type="[newPwd_1_Active ?'text' : 'password']"
                placeholder="请录入新密码"
                :rules="[{ required: true, message: '请填写新密码' }]"
              />
              <van-icon :name="[newPwd_1_Active ? 'eye-o' : 'closed-eye']" class='icon' @click='newPwd_1_Active = !newPwd_1_Active'/>
            </div>
            <div class='input-item'>
              <van-field
                v-model="newPwd_2"
                name="确认新密码"
                label="确认新密码"
                :type="[newPwd_2_Active ?'text' : 'password']"
                placeholder="请再次录入新密码"
                :rules="[{ required: true, message: '请再次填写新密码' }]"
              />
              <van-icon :name="[newPwd_2_Active ? 'eye-o' : 'closed-eye']" class='icon' @click='newPwd_2_Active = !newPwd_2_Active'/>
            </div>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" @click='onFailed' :disabled='!oldPwd || !newPwd_1 || !newPwd_2'>
              提交
            </van-button>
          </div>
        </van-form>
      </template>
    </m-pull-refresh>
  </div>
</template>

<script lang="ts">
import { MHeaderTitle,MPullRefresh } from '@/components'

import { useI18n } from '@/i18nPlugin'
import { toRefs, defineComponent, reactive } from 'vue'

import { useRouter} from 'vue-router'

//接口
import { setUserPwd } from '@/config/api'
//缓存
import { useStore } from 'vuex'

export default defineComponent({
  nem: 'SetPassword',
  components: {
    MHeaderTitle,
    MPullRefresh
  },
  setup: () => {
    const i18n = useI18n()
    const router = useRouter()
    const store = useStore()
    const data = reactive({
      originalActive:false,
      newPwd_1_Active:false,
      newPwd_2_Active:false,
      // refReshActive:false,
      oldPwd:'',
      newPwd_1:'',
      newPwd_2:''
    })
    const goBack = ()=> {
      router.replace('/User')
    }
    const refReshSend = ()=> {
      data.oldPwd = ''
      data.newPwd_1 = ''
      data.newPwd_2 = ''
    }
    const onFailed = ()=> {
      if(data.newPwd_1 != data.newPwd_2) {
        (<any>window).utils.ui.Toast('两次密码不一致，请确认您录入的新密码！')
        return 
      }
      let req = {
        userPwd:data.oldPwd,
        userCode:store.state.userData.userCode,
        userNewPwd:data.newPwd_1,
      }
      setUserPwd(req).then((res:any) => {
        if(res.data.responseCode === 1000) {
          (<any>window).utils.ui.Toast(`${res.data.responseMsg}`)
        }
      })
    }
    return { ...toRefs(data), i18n,goBack,refReshSend,onFailed }
  },
})
</script>

<style scoped lang="scss">
.set-pwd {
  padding-top: 40px;
  .van-form {
    margin-top: 40px;
  }
  .input-item {
    position: relative;
    .van-icon {
      position: absolute;
      right: 10px;
      top: 15px;
      font-size: 16px;
    }
  }
}
</style>
